<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery</title>
</head>
<body>
    <div id="demo1"></div>
    <!-- Query简述是一个javascrip库，以写更少的代码、做更多的事情为宗旨。
        jQuery是一个快速、简洁的javascript库，
        使用户能够方便地遍历HTML Documents、操作DOM、处理事件、
        实现动画效果和提供Ajax交互，此外jQuery兼容CSS3.0及各种浏览器。
        jQuery的优势：（1）利用CSS的优势；（2）良好浏览器兼容性；
        （3）优秀的DOM操作封装和事件处理；（4）多重操作集于一行；
        （5）完善的Ajax；（6）支持扩展 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        //操作demo1元素：添加点内容，加一个背景色，加一个颜色，加一个边框，加一个点击事件
        //过去：
        /* let demo1 = document.getElementById('demo1')
        demo1.innerHTML = 'HelloWorld'
        demo1.style.backgroundColor = 'red'
        demo1.style.color = 'green'
        demo1.style.border = '1px solid black'
        demo1.onclick = function(){
            this.style.backgroundColor = 'blue'
        } */
        //现在： 
        //html() => innerHTML 
        //css()  => style
        //css()方法，可以设置单个样式 方式是：('样式','值')，可以设置多个样式 方式是：({属性1:值1,属性2:值2})
        //click()  => onclick
        $('#demo1').html('HelloWorld').css({
            color:'green',
            border:'1px solid black',
            backgroundColor:'red'
        }).click(function(){
            $(this).css('background-color','blue')
        })

        //上面的我采用jQuery去操作DOM，它的方法可以连续点，原理是下面这个对象定义的方式。
        let obj = {
            a(){
                console.log('aa');
                return this   //执行完方法后，再次返回对象对象
            },
            b(){
                console.log('bb');
                return this
            },
            c(){
                console.log('cc');
                return this
            }
        }
        obj.a()
        obj.b()
        obj.c()
        obj.a().b().c()
    </script>
</body>
</html>